import React from 'react';
import enquire from 'enquire.js';
import { scrollScreen } from 'rc-scroll-anim';
import Nav from './Nav';
import Banner1 from './Banner1';
import Content00 from './Content00';
import Content0 from './Content0';
import Content1 from './Content1';
import Content2 from './Content2';
import Content3 from './Content3';
import Content4 from './Content4';
import {Spin} from 'antd'
import Footer from './Footer';
// import {getcookie} from '../../utils/cookies'
// import {HOMEPAGE_URL} from '../../utils/constants'
import './less/antMotion_style.less';
import {getcookie} from '../../utils/cookies'
import {HOMEPAGE_URL} from '../../utils/constants'
export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMode: false,spinLoading:false
    };
  }
  componentWillMount(){
    let getCourseState = true
    this.setState({getCourseState:getCourseState,spinLoading:true})
    this.props.dispatch({type:"index/getCourseIndexInfo",payload:{getCourseState}})

    let dispatch = this.props.dispatch;
    let url = window.location.search;
    if(url && url.substring(1, url.length).split("&")[0].split("=")[1]){
      // console.log(url);
      let code = url.substring(1, url.length).split("&")[0].split("=")[1];
      // console.log("state--",state)
      let state=url.substring(1,url.length).split("&")[1].split("=")[1];//state==1为老师用户，state==2为学生
      // console.log(state);
      if(state==1){
        // console.log(code);
        //老师登录
        dispatch({type: 'index/teacherLogin', payload: code});
      }else if(state==2){
        // console.log(code);
        //学生
        dispatch({type: 'index/studentLogin', payload: code});
      }
    }
  }
  componentDidUpdate(){
    // console.log("--------------this.state.getCourseState",this.state.getCourseState)
    // console.log("----this.props.indexInfo.getCourseState",this.props.indexInfo.getCourseState)
    if (this.state.getCourseState == true && this.props.indexInfo.getCourseState == true) {
      this.setState({spinLoading:false, getCourseState:false})
      let getCourseState = false
      this.props.dispatch({type:"index/resetState",payload:{getCourseState}})
    }
  }

  componentDidMount() {
    // 适配手机屏幕;
    this.enquireScreen((isMode) => {
      this.setState({ isMode });
    });






  }

  enquireScreen = (cb) => {
    /* eslint-disable no-unused-expressions */
    enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', {
      match: () => {
        cb && cb(true);
      },
      unmatch: () => {
        cb && cb();
      },
    });
    /* eslint-enable no-unused-expressions */
  }

  render() {
    // console.log("-----this.props----render",this.props)
    let props = this.props
    const children = [
      <Nav id="nav_1_0" key="nav_1_0" isMode={this.state.isMode} fatherProps = {props}/>,
      <Banner1 id="Banner_1_0" key="banner_1_0" isMode={this.state.isMode} fatherProps = {props}/>,
      <Content00 id="content_0_0" key="content_0_0" isMode={this.state.isMode} fatherProps = {props}/>,
      <Content1 id="content_1_0" key="content_1_0" isMode={this.state.isMode} fatherProps = {props}/>,
      <Content2 id="content_2_0" key="content_2_0" isMode={this.state.isMode} fatherProps = {props}/>,

      // <Content4 id="content_4_0" key="content_4_0" isMode={this.state.isMode}/>,
      <Footer id="footer_1_0" key="footer_1_0" isMode={this.state.isMode} fatherProps = {props}/>,
    ];
    return (
      <div className="templates-wrapper">
        <Spin spinning={this.state.spinLoading}>
        {children}
        </Spin>
      </div>
    );
  }
}
